<template>
  <div>
    <ul class="space-y-1">
      <li v-for="item in props.menuItems" :key="item.path">

        <a href="#" class="flex items-center justify-between px-1.5 py-1 rounded-md" @click="activePath = item.path"
          :class="{ 'bg-primary/10 text-primary': item.path === activePath, 'text-neutral-700 hover:bg-neutral-100 transition-colors': item.path !== activePath }">
          <span class="flex items-center">
            <SvgIconView class="mr-2" :color="item.path === activePath ? 'currentColor' : 'neutral-700'"
              :iconName="item.icon" size="18" />
            {{ item.name }}
          </span>
          <span
            :class="{ 'bg-primary/20 text-primary text-xs px-1 py-0.5 rounded-full': item.path === activePath, 'bg-neutral-200 text-neutral-700 text-xs px-1 py-0.5 rounded-full': item.path !== activePath }">28</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
const props = defineProps<{
  menuItems: Array<{ name: string; path: string, icon: string }>
  initActivePath: string,
}>()
const activePath = ref(props.initActivePath)

</script>

<style lang="scss" scoped></style>
